<extend name="Base/common"/>
<block name="body">
	<div class="span9 page_message">
		<section id="contents">
			<include file="Addons/_nav"/>
			<div class="tongji_nav">
				<div class="fl">
					<php>$min = I('min',60);$class[$min]='cur';</php>
					<a class="{$class[30]}" href="{:U('lists',array('min'=>30))}">30分钟</a> <a class="{$class[60]}"
					                                                                          href="{:U('lists',array('min'=>60))}">1小时</a>
					<a class="{$class[360]}"
					   href="{:U('lists',array('min'=>360))}">6小时</a> <a class="{$class[1440]}"
					                                                     href="{:U('lists',array('min'=>1440))}">24小时</a>
				</div>
				<div class="fr">
					（1分钟自动刷新一次）<a class="refresh" href="javascript:;"
					              onClick="updateData();"><img width="24"
					                                           src="__IMG__/refresh_icon.png"/></a>
				</div>
			</div>
			<div class="tongji_data_area">
				<div class="Result_graph" id="container">
					<center>
						<br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <img
							src="__IMG__/loading.gif"/>
					</center>
				</div>
			</div>
			<div class="notice_list">
				<h6>系统公告</h6>
				<ul>
					<notempty name="noticeData.list_data">
						<volist name="noticeData.list_data" id="vo">
							<li><a href="{:U('notice_detail',array('id'=>$vo[id]))}"><span class="fl">{$vo.title}</span><span
									class="fr">{$vo.create_time|time_format}</span></a></li>
						</volist>
					</notempty>
				</ul>
			</div>
	</div>
	</section>
	</div>
	<style type="text/css">
		.data-chart {
			margin: 20px;
		}

		.data-chart td {
			background: #fafafa;
			padding: 20px;
			word-break: break-all;
			word-wrap: break-word;
			vertical-align: top
		}

		.data-chart tr:hover td {
			background: #f6f6f6
		}

		.data-chart table {
			background: #ddd
		}

		.data-chart .answer {
			line-height: 20px;
			margin: 10px 0;
		}
	</style>
	<script type="text/javascript">
		function showData(xData, yData) {
			$('#container').highcharts({
				chart: {
					type: 'area'
				},
				title: {
					text: '摇电视次数监控'
				},
				xAxis: {
					categories: xData
				},
				yAxis: {
					title: {
						text: '摇次数'
					},
					labels: {
						formatter: function () {
							return this.value;
						}
					}
				},
				tooltip: {
					pointFormat: '<b>{point.y}</b>'
				},
				plotOptions: {
					area: {
						pointStart: 0,
						marker: {
							enabled: false,
							symbol: 'circle',
							radius: 2,
							states: {
								hover: {
									enabled: true
								}
							}
						}
					}
				},
				series: [{
					name: '时间',
					data: yData
				}]
			});
		}
		function updateData() {
			var min = "{:I('min', 60, 'intval')}";
			$.ajax({
				url: "{:U('getDataByAjax')}",
				data: {'min': min},
				dataType: 'JSON',
				type: 'post',
				success: function (data) {
					//console.log(data);
					////var data = $.parseJSON(data);
					//console.log(data);
					var xData = data.x;
					var yData = data.y;
					showData(xData, yData);
				}
			})

			//测试数据
			// 		yData = [200,10000,500,100,400];
			// 		xData = ['10:00','10:20','10:30','10:40','10:50'];
			// 		showData(xData,yData);
		}
		$(function () {
			updateData();
			setInterval(function () {
				updateData();
			}, 1000 * 60);

		});
	</script>
</block>
<block name="script">
	<script
			src="__STATIC__/highcharts-4.0.1/js/highcharts.js?v={:SITE_VERSION}"></script>
</block>